<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-cascades"></i> 用户查询
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<template>
				<el-table 
				:data="Users.filter(data => !search || data.username.toLowerCase().includes(search.toLowerCase()))"
				 style="width: 100%">
					<el-table-column label="用户id" prop="id" >
					</el-table-column>
					<el-table-column label="用户名" prop="username">
					</el-table-column>
					<el-table-column label="余额" prop="balance">
					</el-table-column>
					<el-table-column label="电话" prop="userTel">
					</el-table-column>
					<el-table-column label="邮箱" prop="email">
					</el-table-column>
					<el-table-column label="性别" prop="sex">
					</el-table-column>
					<el-table-column label="QQ" prop="qq">
					</el-table-column>
					<el-table-column label="出生年月" prop="birthday">
					</el-table-column>
					<el-table-column label="注册时间" prop="registerTime">
					</el-table-column>
					<el-table-column label="最近登录时间" prop="lastLogin">
					</el-table-column>
					<el-table-column align="right">
						<template slot="header" slot-scope="scope">
							<el-input v-model="search" size="mini" placeholder="输入用户名搜索" />
						</template>
					</el-table-column>		
				</el-table>
				
				<el-pagination
				  background
				  :total="total"
				  :current-page="pageNum"
				  :page-size="pageSize"
				  @current-change="changePage"
				  layout="total, sizes, prev, pager, next, jumper"
				  :page-sizes= "[3,5,10]"
				  @size-change="pageSizeChange"
				  >
				</el-pagination>
				
			</template>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery'
	export default {
		data() {
			return {
				Users: [],
				search: '',
				pageNum: 0,
				pageSize: 5,
				total:0,
			}
		},
		methods: {
			pageSizeChange:function(th){
				console.log(th);
				var _this = this;
				_this.pageSize = th;
				$.ajax({
						url: "http://localhost/manager/user",
						data: {
							"pageNum": _this.pageNum,
							"pageSize": _this.pageSize
						},
						type: "get",
						success: function(data) {
							console.log(data);
							_this.Users = data.data.records
							_this.total = data.data.total
						}
					});
			},	
			select: function() {
				var _this = this;
				$.ajax({
					url: "http://localhost/manager/user",
					data: {
						"pageNum": _this.pageNum,
						"pageSize": _this.pageSize
					},
					type: "get",
					success: function(data) {
						console.log(data);
						_this.Users = data.data.records
						_this.total = data.data.total
					}
				});
			},
			changePage:function(val) {
				var _this = this;
				$.ajax({
						url: "http://localhost/manager/user",
						data: {
							"pageNum": val,
							"pageSize": _this.pageSize
						},
						type: "get",
						success: function(data) {
							console.log(data);
							_this.Users = data.data.records
							_this.total = data.data.total
						}
					});
			},			
		},
		created() {
			this.select();
		},
		
	}
</script>

<style>
</style>
